<template>

    <!--此处有个 default-active 属性需要注意，是用来设置菜单的选中样式，我们需要根据当前路由情况来选中-->
    <el-menu :collapse="isMenuCollapse"
             :default-openeds="['0', '1']"
             :default-active="activeIndex"
             class="el-menu-vertical-demo"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b"
             >
        <!--遍历生成父菜单选项-->
        <template v-for="menu in menus">
            <!--有子菜单的时候，就用 el-submenu，再绑个序号 index-->
            <el-submenu
                v-if="menu.subMenus && menu.subMenus.length"
                :index="menu.index"
                :key="menu.index"
                >
                <template slot="title">
                    <!--绑个父菜单的 icon-->
                    <i :class="menu.icon"></i>
                    <!--再绑个父菜单的名称 text-->
                    <span slot="title">{{menu.text}}</span>
                </template>
                <el-menu-item-group>
                    <!--子菜单也要遍历，同时绑上子菜单名称 text，也要绑个序号 index-->
                    <!--使用 router-link 组件来导航-->
                    <!--通过传入 `to` 属性指定链接-->
                    <!--<router-link> 默认会被渲染成一个 `<a>` 标签-->
                    <router-link
                            tag="div"
                            v-for="subMenu in menu.subMenus"
                            :key="subMenu.index" :to="{name: subMenu.routerName}">
                        <el-menu-item :index="subMenu.index">
                            {{subMenu.text}}
                        </el-menu-item>
                    </router-link>
                </el-menu-item-group>
            </el-submenu>
            <!--只有单个父菜单的时候，也要给这个父菜单添加路由，同样的 to 指向要去的地方-->
            <router-link v-else :index="menu.index" :key="menu.index" tag="div" :to="{name: menu.routerName}">
                <!--没子菜单的时候，就用 el-menu-item，也要绑个序号 index-->
                <el-menu-item>
                    <i :class="menu.icon"></i>
                    <span slot="title">{{menu.text}}</span>
                </el-menu-item>
            </router-link>
        </template>
    </el-menu>
</template>

<script>
const menus = [
    {
        text: "service manage",
        icon: "el-icon-settings",
        subMenus: [{text: "service info", routerName: "Service"}]
    },
    {
        text: "product manage",
        icon: "el-icon-menu",
        subMenus: [{text: "product info", routerName: "ProductList"}, {text: "add product", routerName: "ProductAdd"}]
    },
    {
        text: "log info",
        icon: "el-icon-message",
        // 日志信息这里为空，则不会进行跳转
        routerName: ""
    }
].map((x, i) => {
    // 添加 index，可用于默认展开 default-openeds 属性，和激活状态 efault-active 属性的设置
    return {
        ...x,
        // 子菜单就拼接${父菜单index}-${子菜单index}
        subMenus: (x.subMenus || []).map((y, j) => {
            return { ...y, index: `${i}-${j}`};
        }),
        index: `${i}`
    }
})

export default {
    data() {
        return {
            menus,
            activeIndex: ""
        };
    },
    watch: {
        // 为了设置 el-menu 的 default-active 属性，需要获取到路由状态
        '$route' (to) {
            let activeIndex;
            this.menus.forEach(x => {
                if(x.routerName === to.name) {
                    activeIndex = x.index;
                } else {
                    const subMenuItem = x.subMenus.find(y => y.routerName === to.name);
                    if(subMenuItem) {
                        activeIndex = subMenuItem.index;
                    }
                }
            })
            if(activeIndex) {
                this.activeIndex = activeIndex;
            }
        }
    },
    props: {
        isMenuCollapse: Boolean,
    },
    methods: {

    }
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 300px;
    min-height: 400px;
}

</style>